<template>
  <div>
    <el-dialog
      :title="clientId==9999?'添加客户':'编辑客户'"
      :visible="isShowDialog"
      width="30%"
      @close="btnCancle"
    >
      <el-form
        ref="clientObj"
        :model="clientObj"
        label-width="80px"
        :rules="rules"
      >
        <!-- 经纪下拉框 -->
        <el-form-item label="经纪">
          <el-select v-model="clientObj.agent" placeholder="请选择经纪公司">
            <el-option
              v-for="item in agentsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="clientObj.name" />
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱">
          <el-input v-model="clientObj.email" />
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话">
          <el-input v-model="clientObj.phone" />
        </el-form-item>

        <!-- 微信 -->
        <el-form-item label="微信">
          <el-input v-model="clientObj.wechat" />
        </el-form-item>

        <!-- 描述 -->
        <el-form-item label="描述" prop="desc">
          <el-input v-model="clientObj.desc" type="textarea" resize="none" />
        </el-form-item>

        <!-- 头像 -->
        <el-form-item label="头像">
          <ImageUpload ref="cover" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="btnOK">确 定</el-button>
        <el-button size="small" @click="btnCancle">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addClient, clientDetail, updateClient } from '@/api/client'
import { getAgents } from '@/api/agent'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    clientId: {
      type: Number,
      default: -9999
    }
  },
  data() {
    return {
      image: '',
      agentsList: [], // 经纪列表
      // clientObj: [], // 客户信息列表
      clientObj: {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: ''
      }, // 编辑回显数据
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '姓名为1-10位', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 1, message: '描述最少为一位', trigger: 'blur' }
        ]
      }
    }
  },
  // 侦听 clientId数据回显
  watch: {
    async clientId() {
      console.log(45)
      if (this.clientId !== -9999) {
        await this.clientDetail()
        if (this.image) {
          this.$refs.cover.fileList = [{ url: this.image }]
        }
        console.log(110, this.$refs.cover.fileList)
      } else {
        console.log('AAA')
      }
    }
  },
  created() {
    this.getAgents()
    console.log(114, this.clientId)
    console.log(115, this.$store.state.user.token)
  },
  methods: {
    // 获取客户信息详情
    async clientDetail() {
      const { data } = await clientDetail(this.clientId)
      this.clientObj = data
      this.selectAgentName = data.id
      this.image = data.image
      console.log(188, this.clientObj)
    },

    // 经纪列表
    async getAgents() {
      const { data } = await getAgents()
      this.agentsList = data
      // console.log(92, '经纪列表', this.agentsList)
    },

    // // 客户列表
    // async getClient() {
    //   const { data } = await getClient()
    //   // this.clientObj = data
    //   console.log(99, '客户列表', data)
    // },

    btnCancle() {
      // 表单数据重置
      this.clientObj = {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: '',
        image: ''
      }
      // 清空报错
      this.$refs.clientObj.resetFields()
      // 关闭弹框弹窗
      this.$refs.cover.fileList = []
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
      this.$parent.clientId = -9999
      console.log(this.$parent.clientId, 154)
    },

    async btnOK() {
      // console.log(100, this.clientId)
      // 表单校验
      this.$refs.clientObj.validate()
      // 发送请求
      console.log(this.clientId)
      if (this.clientId === -9999) {
        // 新增
        console.log('新增', this.clientObj)
        const res = await addClient({
          ...this.clientObj,
          image: this.$refs.cover.fileList[0] ? this.$refs.cover.fileList[0].url : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F13%2F20211113180144_3f687.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641729500&t=61851f4dd83a4f79ed0b83dcd36349e6',
          created_by: new Date().toLocaleDateString(),
          updated_by: new Date().toLocaleDateString()
        })
        setTimeout(() => {
          if (!(this.$refs.cover.fileList[0] && this.$refs.cover.fileList[0].url)) {
            this.$message.warning('您没有添加图片,使用默认图片')
          }
        }, 500)
        console.log(133, '新增', res)
        // console.log(234)
      } else {
        // 编辑
        console.log(172, this.clientObj)
        const res = await updateClient(this.clientObj)
        console.log(173, res)
      }

      // 提示用户
      this.$message.success('添加成功')

      // 清空图片
      setTimeout(() => {
        this.$refs.cover.fileList = []
      }, 2000)
      // 关闭弹框弹窗
      this.$emit('update:isShowDialog', false)
      // 刷新列表
      this.$emit('update')
    }
  }
}
</script>

<style>
</style>
